// 利润
<template>
  <div class="home-bg padding-20">
    <div class="bg-white padding-top-20 padding-left-20 padding-right-20 padding-bottom-20 new-table-style">
      <el-table :data="dataList" 
                row-key="subjectKey"
                default-expand-all
                height="calc(100vh - 140px)"
                :tree-props="{children: 'child', hasChildren: 'hasChildren'}"
                :row-class-name="tableRowClassName"
                :cell-class-name="tableCellClassName">
        <el-table-column align="left" width="200">
          <template slot="header" slot-scope="scope">
            预算科目<br/>(单位：元)
          </template>
          <template slot-scope="scope">
            <span v-tooltip.content="scope.row.subjectName" :class="(!scope.row.child || scope.row.child.length == 0) && scope.row.level == 1 ? 'arrow-place' : ''">{{scope.row.subjectSimpleName}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="col.label" align="center" :key="i" v-for="(col, i) in dateList">
          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              资金计划数
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[i].planAmount !== null">{{ scope.row.monthList[i].planAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              资金执行数
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[i].executionAmount !== null">{{ scope.row.monthList[i].executionAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              差异额
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[i].deviationAmount !== null">{{ scope.row.monthList[i].deviationAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="120">
            <template slot="header" slot-scope="scope">
              差异率
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[i].executionAmount !== null && scope.row.monthList[i].planAmount !== null">
                <template v-if="scope.row.monthList[i].planAmount === 0 && scope.row.monthList[i].executionAmount !== 0">
                  计划外
                </template>
                <template v-else-if="scope.row.monthList[i].planAmount === 0 && scope.row.monthList[i].executionAmount === 0">
                  -
                </template>
                <template v-else>
                  {{ scope.row.monthList[i].deviationRate | accMul}}%
                </template>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="年合计">
          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              资金计划数
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[Number($route.query.month)].planAmount !== null">{{ scope.row.monthList[Number($route.query.month)].planAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              资金执行数
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[Number($route.query.month)].executionAmount !== null">{{ scope.row.monthList[Number($route.query.month)].executionAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              差异额
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[Number($route.query.month)].deviationAmount !== null">{{ scope.row.monthList[Number($route.query.month)].deviationAmount | fmoneyThousand}}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" min-width="160">
            <template slot="header" slot-scope="scope">
              差异率
            </template>
            <template slot-scope="scope">
              <span v-if="scope.row.monthList && scope.row.monthList[Number($route.query.month)].executionAmount !== null && scope.row.monthList[Number($route.query.month)].planAmount !== null">
                <template v-if="scope.row.monthList[Number($route.query.month)].planAmount === 0 && scope.row.monthList[Number($route.query.month)].executionAmount !== 0">
                  计划外
                </template>
                <template v-else-if="scope.row.monthList[Number($route.query.month)].planAmount === 0 && scope.row.monthList[Number($route.query.month)].executionAmount === 0">
                  -
                </template>
                <template v-else>
                  {{ scope.row.monthList[Number($route.query.month)].deviationRate | accMul}}%
                </template>
              </span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import merge from 'webpack-merge';
  import { apiAccountingMonthNewTree } from '../../../api/businessManage';
  import { accMul, guid } from '@/common/js/utils.js';
  import $ from 'jquery';

  export default {
    data() {
      return {
        selectTime: this.$route.query.year + '-' + this.$route.query.month,
        searchMonth: this.$route.query.year + '-' + this.$route.query.month,
        dataList: [],
        dateList: [],
        monthList: ['januaryAmount','februaryAmount','marchAmount','aprilAmount','mayAmount','juneAmount','julyAmount','augustAmount','septemberAmount','octoberAmount','novemberAmount','decemberAmount'],
        dataChildMap: {},
      };
    },
    methods: {
      setDataChildMap(data, level) {
        data.forEach(item => {
          item.level = level;
          if (item.child && item.child.length) {
            item.hasChildren = true

            if (item.hasChildren) {
              let child = item.child.map(row => {
                row.level = level + 1
                row.hasChildren = row.child && row.child.length
                let newObj = JSON.parse(JSON.stringify(row));
                newObj.child = null;
                return newObj;
              });

              this.dataChildMap[item.subjectKey] = child
              this.setDataChildMap(JSON.parse(JSON.stringify(item.child)), level + 1);
            }

            item.child = null;
          } else {
            item.hasChildren = false;
          }
        });
      },
      loadData(tree, treeNode, resolve) {
        resolve(this.dataChildMap[tree.subjectKey]);
      },
      setDateList () {
        let dateList = []

        for (let i = 1; i <= Number(this.$route.query.month); i++) {
          dateList.push({
            label: i + '月',
          })
        }

        this.dateList = dateList
      },
      async getDataList() {
        let res = await apiAccountingMonthNewTree({
          projectIds: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
          fiscalYear: this.$route.query.year,
          fiscalMonth: this.$route.query.month,
          // accountingType: '5',
        });
        // this.setDataChildMap(res.rows || [], 1);
        let rows = res.rows || []
        let dataList = []
        rows.forEach((item, index) => {

          if (item.ifRowNew == '1' && index !== 0) {
            dataList.push({subjectKey: guid(), nullRow: true})
          }

          dataList.push(item)
        })

        this.dataList = dataList;
        // this.initTableFixedheight()90
      },
      tableRowClassName ({ row, rowIndex }) {
        if (row.nullRow) {
          return 'bg-row-null'
        } else if (row.menuColor !== '' && row.menuColor !== null && row.menuColor !== undefined) {
          return 'bg-row-color-' + row.menuColor
        } else {
          return 'bg-row-color-white'
        }
      },
      tableCellClassName ({ row, rowIndex }) {
        if (row.cellColor !== '' && row.cellColor !== null && row.cellColor !== undefined) {
          return 'bg-cell-color-' + row.cellColor
        } else {
          return 'bg-cell-color-white'
        }
      },
      //因为加粗了滚动条，所以减少固定列的高度，以免遮挡滚动条 和 滚动条抖动
      initTableFixedheight() {
        setTimeout(() => {
          let diffHeight = $('.el-table__fixed-body-wrapper').height() - 10;
          $('.el-table__fixed-body-wrapper').css('height', diffHeight);
        }, 50);
      },
    },
    mounted() {
      this.setDateList();
      this.getDataList();
    },
    components: {},
  };
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}

::v-deep .el-table {
  .el-table__header-wrapper .has-gutter tr .is-center:nth-last-child(2) {
    border-right: none !important;
  }

  .el-table__cell:first-child .cell {
    white-space: nowrap;
    cursor: pointer;
  }

  .bg-row-null td {
    border-left: none !important;
    border-right: none !important;
    padding: 5px 0 !important;
  }

  .bg-row-null:hover td {
    background: #fff !important;
  }

  .bg-row-null td:hover {
    background: #fff !important;
  }

  .bg-row-color-white td:first-child {
    background: #fff !important;
  }

  .bg-row-color-0 td:first-child {
    background: #D6E6FF !important;
  }

  .bg-row-color-1 td:first-child {
    background: #FEF4E5 !important;
  }

  .bg-row-color-2 td:first-child {
    background: rgba(51, 132, 254, 0.15) !important;
  }

  .bg-row-color-3 td:first-child {
    background: rgba(51, 132, 254, 0.08) !important;
  }

  .bg-row-color-4 td:first-child {
    background: rgba(51, 132, 254, 0.02) !important;
  }

  .bg-cell-color-white {
    background: #fff !important;
  }

  .bg-cell-color-0 {
    background: #D6E6FF !important;
  }

  .bg-cell-color-1 {
    background: #FEF4E5 !important;
  }

  .bg-cell-color-2 {
    background: rgba(51, 132, 254, 0.15) !important;
  }

  .bg-cell-color-3 {
    background: rgba(51, 132, 254, 0.08) !important;
  }

  .bg-cell-color-4 {
    background: rgba(51, 132, 254, 0.02) !important;
  }

  td.el-table__cell {
    border-bottom: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
  }
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #535353 !important;
  }
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    background: #ededed !important;
  }
  ::v-deep .el-table thead .cell {
    font-size: 14px;
  }
</style>